<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性过滤选择器</title>
		<script src="../js/jquery-3.7.1.min.js"></script>
		<style>
			.box{
				width: 400px;
				height: 200px;
				background-color: bisque;
				margin: 20px;
			}
		</style>
		<script>
			$(function(){
				$('[title]').css('padding','20px')
				$('[title=en]').css({
					width:'200px',
					height:'50px',
					border:'2px dashed green'
				})
				$('[title*=en]').css({
					color:'red'
				})
				$('[title^=en]').css({
					color:'green'
				})
				// 包含完整en
				$('[title~=en]').css({
					fontWeight:800
				})
			})
		</script>
	</head>
	<body>
		<div id="one" class="box">
			<div class="item" title="en">class为item的div</div>
			<span class="item" title="uken">class为item的span</span>
		</div>
		<div id="two" class="box">
			<div class="item" title="uk-en">class为item的div</div>
			<span class="item">class为item的span</span>
		</div>
		<div id="three" class="box">
			<div class="item mini" title="english">class为item的div</div>
			<span class="item mini" title="en-uk">class为item的span</span>
		</div>
		<div id="four" class="box">
			<div class="other mini" title>class为other的div</div>
			<span class="other mini" title="en uk">class为other的span</span>
		</div>
	</body>
</html>